<template>
  <view class="page">
    <my-modal ref="modal" title="优惠券详情">
      <section class="is-flex-col container" style="color: #c8cee1">
        <view class="box">
          <my-row v-if="ifShow(type)" title="门店名称" :value="couponDetail.bname" padding="10px 0"></my-row>
          <my-row v-if="ifShow(type)" title="优惠券名称" :value="couponDetail.title" padding="10px 0"></my-row>
          <my-row v-if="ifShow(type)" title="过期时间" :value="couponDetail.limittime" padding="10px 0"></my-row>
          <my-row v-if="ifShow(type)" title="是否使用" :value="getType()" padding="10px 0"></my-row>

          <view v-if="$format(couponDetail, 'qrcode')" class="is-flex justify-center mt-5 mb-5">
            <image :src="$utils.base64Img(couponDetail.qrcode)" style="width: 100px; margin: 20px" mode="widthFix"></image>
          </view>

          <view v-if="$format(couponDetail, 'useinfo')" class="fs-xxs mt-25">
            <p class="mb-5">使用说明:</p>
            <view style="color: #6a78a3">{{ $format(couponDetail, 'useinfo', '') }}</view>
          </view>
        </view>
      </section>
    </my-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectCoupon: null,
      couponDetail: null,
      type: null, // all / qrcode

      isUsedDict: { 未使用: 0, 已使用: 1 },
      expiredDict: { 未过期: 0, 已过期: 1 }
    }
  },
  methods: {
    ifShow(type) {
      if (this.type === 'all') return true
      return false
    },
    open(param) {
      this.selectCoupon = this.$format(param, 'selectCoupon')
      this.type = this.$format(param, 'type')
      this.getMemberCouponDetail()

      this.$refs.modal.open({ showClose: this.$format(param, 'showClose', true) })
    },
    close() {
      this.$emit('afterModalClose')
      this.$refs.modal.close()
    },
    getType() {
      const selectCoupon = this.selectCoupon
      if (selectCoupon.expired === this.expiredDict['已过期']) {
        return '已过期'
      }
      return selectCoupon.isUsed === this.isUsedDict['未使用'] ? '未使用' : '已使用'
    },
    /**
     * 查询优惠券详情
     */
    getMemberCouponDetail() {
      const id = this.$format(this.selectCoupon, 'id')
      if (!id) return
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return
      console.param('查询优惠券详情', baseParam)
      Object.assign(baseParam, { id })
      this.$api
        .getMemberCouponDetail(baseParam)
        .then(res => {
          console.res('查询优惠券详情', res)
          this.couponDetail = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('查询优惠券详情', err)
          this.errMsg(err, '请求优惠券详情失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box {
  background: $color-primary-modal-bg;
  padding: 10px 0;
  ::v-deep .row {
    padding: 10px 15px;
    .title {
      color: $color-primary-grey-text;
    }
    .value {
      color: $white;
    }
  }
  .item {
    border-bottom: 10px solid $color-primary-bg;
    &:last-child {
      border-bottom: 0;
    }
  }
}

// 订单明细
.detail-box {
  background: $color-primary-modal-bg;
  .item {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;
  }
  // .item:odd {}
  .item:nth-child(even) {
    background: $color-primary-bg;
  }
}
</style>
